<template>
  <view class="popup">
    <up-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      @close="close"
      @open="open"
    >
      <view class="top">领取优惠券</view>
      <view class="content">
        <!-- <view class="text-xl margin-bottom-lg">领取优惠券</view> -->
        <scroll-view scroll-y>
          <view class="list-item" v-for="(item, index) of list" :key="index">
            <view class="coupon">
              <view class="coupon_left">
                <view class="coupon_left--title">
                  {{ item.title }}
                </view>
                <view class="coupon_left--desc">
                  <view class="u-line-1">
                    满
                    {{ item.fullPrice }}
                    元可用
                  </view>
                  <view class="margin-top-sm">
                    <text v-if="item.validityType == couponWellType.today">
                      领取后{{ item.validDays }}天内可用
                    </text>
                    <text v-else-if="item.validityType == couponWellType.date">
                      {{ item.startTime }}至{{ item.endTime }}有效
                    </text>
                  </view>
                </view>
              </view>
              <view
                class="coupon_right"
                :style="[item._config.btnStyle]"
                @tap="onTake(item, index)"
              >
                {{ item._config.btnName }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="popup-bottom">&nbsp;</view>
    </up-popup>
  </view>
</template>

<script setup>
import {
  reactive,
  ref,
  nextTick,
  computed,
  onMounted,
  watch,
  watchEffect,
} from "vue";
import BasicConfig from "../../utils/config";
import errorCode from "../../utils/http/errorCode";
import {
  couponType,
  couponWellType,
  takeCoupnStatus,
} from "../../enums/coupon";

const $emit = defineEmits(["update:show", "close", "take"]);
const $props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array,
    default: [],
  },
});
const $data = reactive({});
const close = () => {
  $emit("update:show", false);
};
const open = () => {};
const onTake = (e, i) => {
  if (e.takeStatus == takeCoupnStatus.untake) {
    $emit("take", e, i);
  }
};
onMounted(() => {});
</script>
<script>
// 小程序穿透
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.popup {
  ::v-deep .u-popup__content {
    border-radius: 30rpx 30rpx 0 0 !important;
    height: 50vh;
  }
  .top {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    height: 8vh;
    line-height: 8vh;
    text-align: center;
    font-size: 34rpx;
    font-weight: 700;
  }
  .content {
    background: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    height: 100%;
    padding: 0 30rpx;
    // overflow-y: auto;
    position: relative;
    height: 40vh;
    scroll-view {
      width: 100%;
      height: 40vh;
      .list-item {
        position: relative;
        margin-bottom: 30rpx;
        border-radius: 20rpx;
        background: var(--main-bg-color);
        height: 240rpx;
        &:last-child {
          margin-bottom: 100rpx;
        }
        .coupon {
          display: flex;
          align-items: center;
          height: 100%;
          &_left {
            width: calc(100% - 200rpx);
            height: 100%;
            padding: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &--title {
              font-size: 32rpx;
              font-weight: 700;
            }
            &--desc {
              color: #333333;
              font-size: 30rpx;
            }
          }
          &_right {
            width: 200rpx;
            height: 100%;
            text-align: center;
            line-height: 240rpx;
            font-size: 34rpx;
            border-radius: 0 20rpx 20rpx 0;
          }
        }
      }
    }
  }
  .popup-bottom {
    height: 2vh;
  }
}
</style>
